<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <div id="app">
            <!--
                如下所示，虽然写了两个div，每个div里都有单独得input框
                但是实际上，在其中一个input里输入内容，再切换到另一个input里，上一次输入得内容还在 
                这是由于vue把input进行了复用
             -->
            <div v-if="isEmail" class="email">
                <span>邮箱</span>
                <input type="text" placeholder="请输入邮箱">
                <button @click="switchs">switch</button>
            </div>
            <div v-else class="age">
                <span>年龄</span>
                <input type="text" placeholder="请输入年龄">
                <button @click="switchs">switch</button>
            </div>

            <!-- 
                解决方式：
                    给input框加一个key属性，不同名字得key，vue会认为他们是不同得东西
             -->
            <div v-if="isEmail" class="email">
                <span>邮箱</span>
                <input key="email" type="text" placeholder="请输入邮箱">
                <button @click="switchs">switch</button>
            </div>
            <div v-else class="age">
                <span>年龄</span>
                <input key="age" type="text" placeholder="请输入年龄">
                <button @click="switchs">switch</button>
            </div>
        </div>
        <script src="../js/vue.js"></script>
        <script>
            const app = new Vue({
                el: '#app',
                data: {
                    isEmail: true
                },
                methods: {
                    switchs() {
                        this.isEmail = !this.isEmail
                    }
                },
            })
        </script>
    </body>
</html>